<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="max-age=172800, public, must-revalidate">

<title>Registration page</title>
<script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>

<script type="text/javascript" src="../../resources/js/fancybox/jquery.fancybox-1.3.4.js"></script>

<script type="text/javascript" src="../../resources/js/jquery.form.js"></script>
<script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/jquery.validate.js"></script>
<script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/additional-methods.js"></script>
<script type="text/javascript" src="../../resources/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="../../resources/js/jquery-ui-timepicker-addon.js"></script>
<script src="../../resources/js/jquery.myplugin.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="../../resources/js/fancybox/jquery.fancybox-1.3.4.css"/>

<style type="text/css">
    .ui-timepicker-div .ui-widget-header {
        margin-bottom: 8px;
    }

    .ui-timepicker-div dl {
        text-align: left;
    }

    .ui-timepicker-div dl dt {
        height: 25px;
    }

    .ui-timepicker-div dl dd {
        margin: -25px 0 10px 65px;
    }

    .ui-timepicker-div td {
        font-size: 90%;
    }
</style>
<style type="text/css">
    * {
        font-family: Verdana;
        font-size: 96%;
    }

    label {
        width: 20em;
        float: left;
    }

    label.error {
        float: none;
        color: red;
        padding-left: .5em;
        vertical-align: top;
    }

    p {
        clear: both;
    }

    .submit {
        margin-left: 12em;
    }

    em {
        font-weight: bold;
        padding-right: 1em;
        vertical-align: top;
    }

    .ui-jqgrid {
        font-size: 1em
    }

    body {
        font-size: 120%;
        font-weight: bold;
    }
</style>
<script>
$(document).ready(function() {

    $("#rules").fancybox({
                'width'             : '75%',
                'height'            : '90%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });

    $("#cdateOfBirth").datepicker({
                dateFormat : "yy-mm-dd",
                maxDate : 0,
                yearRange: '1900:+0',
                minDate: new Date(1900, 1 - 1, 1),
                changeMonth : true,
                changeYear : true
            });

    $(".timeChooser").hide();

    $(".checkButton").button();

    $(".checkButton").click(function() {
        //$(this).find(".timeChooser").show();
        //return false;
        if ($(this).val() == "добавить") {
            $(this).val("удалить");
            $(this).next().children().val("");
        } else {
            $(this).val("check");
        }
        $(this).next().toggle('slow');
    });

    $(".timeClass").timepicker({
                showSecond: false,
                timeFormat: 'hh:mm:ss',
                onClose: function(e) {
                    var startTime, endTime;
                    if ($(this).attr('name').indexOf('start') >= 0) {
                        startTime = $(this);
                        endTime = $(this.nextElementSibling);
                    }
                    if ($(this).attr('name').indexOf('end') >= 0) {
                        endTime = $(this);
                        startTime = $(this.previousElementSibling);
                    }

                    if (startTime.val().trim() != "" && endTime.val().trim() != "" && startTime.val() > endTime.val()) {
                        //endTime.css('background-color','red');
                        endTime.val(startTime.val());
                    }

                }

            });

    $("#checkbox").buttonsetv();

    //$("#radiosex").buttonset();

    $("#ccity").autocomplete({
                source: function(request, response) {
                    jQuery.ajax({
                                url : "/search/cities",
                                dataType : "json",
                                data : {
                                    term : request.term
                                    //groupId : $("#groupId").val();
                                },
                                success : function(data) {
                                    response(jQuery.map(data, function(item) {
                                        return {
                                            label: item.ruName,
                                            value: item.ruName,
                                            id: item.idCity
                                        }
                                    }))
                                }
                            })
                },
                select: function(event, ui) {
                    if (ui.item) {
                        putCityId(ui.item.id);
                    }
                },
                minLength : 2,
                open : function() {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function() {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });

    $("#weekdaysTabs").tabs({
                collapsible: true,
                selected: -1
            });

    $("#registrationForm").validate({
                submitHandler: function() {
                 if (fileExist() && findSize() && checkFileExtension()){
                    postSubmit();
                    alert("Проверьте почту для окончания регистрации");
                    }
                },
                rules: {
                    email: {
                        required: true,
                        email: true,
                        remote: "validation/checkEmail"
                    },
                    firstName: {
                        required: true,
                        minlength: 2,
                        maxlength: 24
                    },
                    lastName: {
                        required: true,
                        minlength: 2,
                        maxlength: 24
                    },
                    pass: {
                        required: true,
                        minlength: 6

                    },
                    confPass: {
                        required: true,
                        minlength: 6,
                        equalTo: "#cpass"
                    },
                    dateOfBirth: {
                        required: true
                    },
                    city: {
                        min: 1,
                        required: true
                        //remote: "validation/checkCity"
                    },
                    sex: {
                        required: true
                    },
                    jobTypes: {
                        required: true
                    },
                    about: {
                        required: true
                    },
                    convention: {
                        required: true
                    }
                },
                messages: {
                    email: {
                        required: "Это поле обязательно для заполнения",
                        email: "Введенный Вами адресс не является валидным",
                        remote: jQuery.format("{0} уже используется другим пользователем")
                    },
                    firstName: {
                        required: "Это поле обязательно для заполнения",
                        minlength: "Минимальная длинна имени - 2 символа",
                        maxlength: "Максимальная длинна имени - 24 символа"
                    },
                    lastName: {
                        required: "Это поле обязательно для заполнения",
                        minlength: "Минимальная длинна фамилии - 2 символа",
                        maxlength: "Максимальная длинна фамилии - 24 символа"
                    },
                    pass: {
                        required: "Это поле обязательно для заполнения",
                        minlength: "Минимальная длинна пароля - 6 символов"

                    },
                    confPass: {
                        required: "Это поле обязательно для заполнения",
                        minlength: "Минимальная длинна пароля - 6 символов",
                        equalTo: "Пароли не совпадают"
                    },
                    city: {
                        min: "К сожалению, такого города нет в нашей базе данных",
                        required: "Это поле обязательно для заполнения",
                        remote: "К сожалению, такого города нет в нашей базе данных"
                    },
                    jobTypes: {
                        required: "Это поле обязательно для заполнения"
                    },
                    dateOfBirth: {
                        required: "Это поле обязательно для заполнения"
                    },

                    sex: {
                        required: "Выберите пожалуйста пол"
                    },
                    about: {
                        required: "Это поле обязательно для заполнения"
                    },
                    convention: {
                        required: "Примите пожалуйста правила пользования сервисом"
                    }

                }
            });
})
        ;

function putCityId(idCity) {
    $("#idCity").val(idCity);
}

function checkStartLessThanEnd(e) {
    alert($(e).val());
}


    function findSize() {
    if ( $.browser.msie ) {
       var a = document.getElementById('cimage').value;
           $('#myImage').attr('src',a);
           var imgbytes = document.getElementById('myImage').fileSize;
           //var imgkbytes = Math.round(parseInt(imgbytes)/1024);
           if (imgbytes>100000) {
           alert("Размер фотографии превышает 100кб. Добавьте пожалуйста фотографию с меньшим размером!");
                   return false; }
                   else {return true;}
    }else {
           var fileInput = $("#cimage")[0];
           var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
           //var imgkbytes = Math.round(parseInt(imgbytes)/1024);
           if (imgbytes>100000) {
           alert("Размер фотографии превышает 100кб. Добавьте пожалуйста фотографию с меньшим размером!");
                   return false; }
                   else {return true;}
     }
}

function checkFileExtension(){
     var filename;

      if ( $.browser.msie ) {
      filename =  document.getElementById('cimage').value;

    }else {
           var fileInput = $("#cimage")[0];
           filename =  fileInput.value;

     }

    var ext = filename.split('.').pop();
    if((ext!="jpg") && (ext!="jpeg")) {
        alert("Допустимы фотографии только в формате jpg!");
        return false;
    }
    return true;
}

function fileExist(){
       if ( $.browser.msie ) {
       var a = document.getElementById('cimage').value;
           $('#myImage').attr('src',a);
           return document.getElementById('myImage').fileSize;


    }else {
           var fileInput = $("#cimage")[0];
           return fileInput.files[0].fileSize; // Size returned in bytes.

     }

}

</script>

</head>
<body>


<sf:form class="cmxform" modelAttribute="worker" id="registrationForm" method="post"
         action="/registration/registerWorker.do" enctype="multipart/form-data">
    <fieldset>
        <!--<legend>Пожалуйста введите информацию о себе</legend>-->

        <p>
            <label for="cemail">E-Mail *</label>
            <em></em><sf:input id="cemail" path="email" name="email" size="25" class="required email"/>
        </p>

        <p>
            <label for="cpass">Пароль *</label>
            <em></em><sf:password id="cpass" path="password" name="pass" type="password" size="25" class="required"/>
        </p>

        <p>
            <label for="cconfPass">Подтверждение пароля *</label>
            <em></em><input id="cconfPass" name="confPass" type="password" size="25" class="required"/>
        </p>

        <p>
            <label for="cfirstName">Имя *</label>
            <em></em><sf:input path="firstName" id="cfirstName" name="firstName" size="25" class="required"/>
        </p>

        <p>
            <label for="clastName">Фамилия *</label>
            <em></em><sf:input path="lastName" id="clastName" name="lastName" size="25" class="required"/>
        </p>

        <p>
            <img id="myImage" src="" style="display:none;"><br>
            <label for="cimage">Фотография</label>
            <input type="file" id="cimage" name="image" size="25"/>
        </p>

        <p>
            <label for="cdateOfBirth">Дата рождения *</label>
            <em></em><sf:input path="dateOfBirth" id="cdateOfBirth" name="dateOfBirth" size="25" readonly="readonly"/>
        </p>

        <p>

        <div id="radiosex">
            <sf:label for="csex" path="sex">Пол * </sf:label>
            М: <sf:radiobutton checked="false" id="radiosex1" path="sex" name="sex" value="1"/>
            Ж: <sf:radiobutton checked="false" id="radiosex2" path="sex" name="sex" value="0"/>
        </div>
        </p>

        <p>
            <label for="ccity">Город *</label>
            <em></em><input id="ccity"
                            title="Начните печатать название города и выберите Ваш город из выпавшего списка."
                            name="visicity" size="25" class="required"/>
            <sf:input path="city" id="idCity" type="hidden" name="city"/>
        </p>

        <p>
            <label for="cphone">Телефон </label><em></em>
            <sf:input path="phone" id="cphone" name="phone" size="25"/>
        </p>

        <p>
            <label for="cskype">Skype </label><em></em>
            <sf:input path="skype" id="cskype" name="skype" size="25"/>
        </p>

        <p>
            <label for="cicq">Icq </label><em></em>
            <sf:input path="icq" id="cicq" name="icq" size="25"/>
        </p>

        Предпочитаемое время для работы
        <div id="weekdaysTabs">

            <ul>
                <li><a href="#mondayTab">Понедельник</a></li>
                <li><a href="#tuesdayTab">Вторник</a></li>
                <li><a href="#wednesdayTab">Среда</a></li>
                <li><a href="#thursdayTab">Четверг</a></li>
                <li><a href="#fridayTab">Пятница</a></li>
                <li><a href="#saturdayTab">Суббота</a></li>
                <li><a href="#sundayTab">Воскресение</a></li>
            </ul>

            <div id="mondayTab">
                <p>
                    <input class="checkButton" type="button" value="добавить"/>
			<span class="timeChooser">
			Начало:<input class="timeClass" type="text" value="" readonly="readonly" name="startTime0"/>
			Конец:<input class="timeClass" type="text" value="" readonly="readonly" name="endTime0"/>
			</span>

                </p>
            </div>
            <div id="tuesdayTab">
                <p>
                    <input class="checkButton" type="button" value="добавить"/>
			<span class="timeChooser">
			Начало:<input class="timeClass" type="text" value="" readonly="readonly" name="startTime1"/>
			Конец:<input class="timeClass" type="text" value="" readonly="readonly" name="endTime1"/>
			</span>
                </p>
            </div>
            <div id="wednesdayTab">
                <p>
                    <input class="checkButton" type="button" value="добавить"/>
			<span class="timeChooser">
			Начало:<input class="timeClass" type="text" value="" readonly="readonly" name="startTime2"/>
			Конец:<input class="timeClass" type="text" value="" readonly="readonly" name="endTime2"/>
			</span>
                </p>
            </div>
            <div id="thursdayTab">
                <p>
                    <input class="checkButton" type="button" value="добавить"/>
			<span class="timeChooser">
			Начало:<input class="timeClass" type="text" value="" readonly="readonly" name="startTime3"/>
			Конец:<input class="timeClass" type="text" value="" readonly="readonly" name="endTime3"/>
			</span>
                </p>
            </div>
            <div id="fridayTab">
                <p>
                    <input class="checkButton" type="button" value="добавить"/>
			<span class="timeChooser">
			Начало:<input class="timeClass" type="text" value="" readonly="readonly" name="startTime4"/>
			Конец:<input class="timeClass" type="text" value="" readonly="readonly" name="endTime4"/>
		</span>
                </p>
            </div>
            <div id="saturdayTab">
                <p>
                    <input class="checkButton" type="button" value="добавить"/>
			<span class="timeChooser">
			Начало:<input class="timeClass" type="text" value="" readonly="readonly" name="startTime5"/>
			Конец:<input class="timeClass" type="text" value="" readonly="readonly" name="endTime5"/>
		</span>
                </p>
            </div>
            <div id="sundayTab">
                <p>
                    <input class="checkButton" type="button" value="добавить"/>
			<span class="timeChooser">
			Начало:<input class="timeClass" type="text" value="" readonly="readonly" name="startTime6"/>
			Конец:<input class="timeClass" type="text" value="" readonly="readonly" name="endTime6"/>
		</span>
                </p>
            </div>
        </div>


        <p>
            <label for="cabout">О себе *</label>
            <em>*</em><sf:textarea path="about" id="cabout" name="about"/>
        </p>

        <p>
            <label for="cjobTypesEnd">Предпочитаемый тип работ *</label><em></em>

        <div id="checkbox">
            <c:forEach var="jobType" items="${jobTypes}">
                <sf:input path="jobTypes" id="jobTypes${jobType.idJob }" type="checkbox" name="jobTypes"
                          value="${jobType.idJob}" class="required"/>
                <label for="jobTypes${jobType.idJob }">${jobType.title}</label>
            </c:forEach>
            <input id="cjobTypesEnd" type="hidden"/>
        </div>
        </p>

        <p>
            <label for="cconvention">Я ознакомлен и принимаю <a id="rules" href="/validation/rules">правила</a> данного
                сервиса</label><em></em>
            <input type="checkbox" id="cconvention" name="convention" value=""/>
        </p>

        <sf:errors path="*" cssStyle="color: red"/>
        <!-- <input class="submit" type="reset" value="Reset"/><br/> -->
        <input class="submit" type="submit" value="Зарегистрироваться"/>

    </fieldset>
</sf:form>
</body>
</html>